<template>
  <div>
    <van-toast id="van-toast" />
    <div
      class="pause"
      v-show="showFlag"
    >
      <span class="text">
        ھەمبەھىرلەش
        <button open-type='share'></button>
      </span>
    </div>
    <div class="video-wrap">
      <txv-video
        :vid="vid"
        v-if="vid"
        playerid="txv1"
        defn
        :autoplay="true"
        @timeupdate="update"
        @ended="ended"
      ></txv-video>
      <div class="detail">
        <div class="title">{{videoInfo.name}}</div>
        <div class="info">
          <span class="time">ۋاقتى: {{time}}</span>
          <span class="like">ئاستىدىكى ئېلاننى چىكىپ قويۇڭ</span>
          <span class="play-count">كۆرۈلۈشى: {{videoInfo.counter}}</span>
        </div>
      </div>
      <div class="btn-wrapper">
        <button @click="toRedPacket">قىزىل بولاق</button>
        <button open-type="share"> ھەمبەھىرلەش</button>
      </div>
      <div class="my-ad">
        <img
          :src="ad.imgUrl"
          @click="toAd"
        >
      </div>
      <div class="recommend">
        <div class="title">تەۋسىيە ڧىلىملەر</div>
        <div class="content">
          <div
            class="item"
            v-for="(item,index) in list"
            :key="index"
            @click="toVideo(item)"
          >
            <img :src="item.img_url">
            <div class="title">{{item.name}}</div>
          </div>
        </div>
      </div>
      <div class="advertise">
        <ad unit-id="adunit-9155bec8aa4c0615"></ad>
      </div>
    </div>
  </div>
</template>
<script>
import { showTimerToast } from "@/util";
const txvContext = requirePlugin("tencentvideo");

import store from "../../store/store";
// import { TimerToast } from "../../utils/utils";
export default {
  onShareAppMessage(options) {
    return {
      title: this.videoInfo.name,
      path: `/pages/VideoDetail/main?vid=${this.vid}`,
      imageUrl: this.videoInfo.img_url,
      success: res => {},
      fail: () => {},
      complete: () => {}
    };
  },
  data() {
    return {
      vid: "",
      txvContext: "",
      videoInfo: "",
      time: "",
      list: {},
      adList: [],
      isPause: false,
      showFlag: false,
      ad: ""
    };
  },
  onLoad: function() {
    this.vid = this.$root.$mp.query.vid;
    this.$http
      .get("https://wx.2xur7.cn/weapp/videoList?vid=" + this.vid)
      .then(res => {
        let videoInfo = res.data.data.video[0];
        videoInfo.counter = Number(videoInfo.counter);
        this.videoInfo = videoInfo;
        let time = videoInfo.create_time;
        let time1 = `${time.slice(8, 10)}-${time.slice(5, 7)}-${time.slice(
          0,
          4
        )}`;
        this.time = time1;
        let dt = new Date(time);
        /* this.time = `${dt
          .getDay()
          .toString()
          .padStart(2, 0)}-${dt
          .getMonth()
          .toString()
          .padStart(2, 0)}-${dt.getFullYear()}`; */
        wx.setNavigationBarTitle({ title: videoInfo.name });
        wx.setNavigationBarColor({
          frontColor: "#ffffff", //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
          backgroundColor: "#ff6e96", //背景颜色值，有效值为十六进制颜色,
          success: res => {}
        });
      });
    /*  let adList = wx.getStorageSync("config");
    this.adList = adList.adList.videoDetail;
    let counter = 0; */
  },
  onShow() {
    this.$http
      .get("https://wx.2xur7.cn/weapp/videoList?type=tuijian")
      .then(res => {
        this.list = res.data.data.list;
      });
  },
  onReady() {
    this.txvContext = txvContext.getTxvContext("txv1");
  },
  methods: {
    toAd() {
      let ad = this.ad;
      console.log(ad);
      if (ad.type == "web") {
        wx.navigateTo({ url: "/pages/AD/main?from=videoDetail" });
      }
      if (ad.type == "weapp") {
        let weappInfo = ad.weappInfo;
        wx.navigateToMiniProgram({
          appId: weappInfo.appId,
          path: weappInfo.path
        });
      }
    },
    getBack() {
      wx.navigateTo({ url: "/pages/HotVideo/main" });
      // wx.redirectTo({ url: '/pages/VideoDetail/main' });
    },
    pause() {
      //   this.txvContext = txvContext.getTxvContext("txv1");
    },
    update(e) {
      // console.log(e.timeStamp);
      /* if (e.timeStamp >= 16000 && !this.isPause) {
        showTimerToast("دوستلىرىڭىزغا ھەمبەھەڭ", 3000);
        this.txvContext.pause();
        setTimeout(() => {
          this.txvContext.play();
        }, 5000);
        this.isPause = true;
      } */
    },
    ended(e) {
      console.log(e);
    },
    toVideo(item) {
      store.commit("playVideo", item);
      this.$http.get("https://wx.15v3a.cn/weapp/counter?vid=" + item.id);
      // console.log(item);
      wx.navigateTo({ url: `/pages/VideoDetail/main?vid=${item.video_url}` });
    },
    toRedPacket() {
      wx.navigateTo({ url: "/pages/RedPacket/main" });
    }
  },
  created() {
    let { videoDetailAD } = wx.getStorageSync("config");
    this.ad = videoDetailAD;
  }
};
</script>
<style lang="scss">
page {
  width: 100%;
  height: 100%;
}
.pause {
  position: fixed;
  top: 431rpx;
  left: 241rpx;
  width: 300rpx;
  height: 200rpx;
  // border: 5rpx solid #666;
  z-index: 5;
  // box-shadow: 0 0 5rpx 2rpx rgab(0, 0, 0, 0.1);
  border-radius: 50%;
  background-color: black;
  opacity: 0.5;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  .text {
    font-size: 50rpx;
    color: white;
    button {
      visibility: hidden;
    }
  }
}
.video-wrap {
  width: 100%;
  //   height: 370rpx;
  //   border: 1px sandybrown solid;
  box-sizing: border-box;
  .detail {
    margin-top: 25rpx;
    .title {
      text-align: right;
      font-size: 28rpx;
      color: #666;
      margin-right: 30rpx;
    }
    .info {
      margin-top: 15rpx;
      display: flex;
      justify-content: space-around;
      color: #cccccc;
      padding: 0 20rpx;
      .time {
        font-size: 25rpx;
      }
      .play-count {
        font-size: 25rpx;
      }
      .like {
        font-size: 20rpx;
        border: 2rpx solid #ff6e96;
        border-radius: 20rpx;
        display: inline-block;
        width: 240rpx;
        color: #ff6e96;
        text-align: center;
        line-height: 31rpx;
      }
    }
  }
  .btn-wrapper {
    width: 94%;
    margin: 0 auto;
    margin-top: 15rpx;
    display: flex;
    justify-content: space-around;
    :first-child {
      color: #f7f7f7;
      background: linear-gradient(90deg, #c471f5, #fa71cd);
      width: 46%;
      height: 70rpx;
      border-radius: 40rpx;
      line-height: 70rpx;
      font-size: 30rpx;
    }
    :last-child {
      color: #f7f7f7;
      // background: linear-gradient(red, blue);
      background: linear-gradient(90deg, #00baff, #0078ff);
      line-height: 70rpx;
      border-radius: 40rpx;
      height: 70rpx;
      width: 46%;
      font-size: 30rpx;
    }
  }
  .recommend {
    .title {
      text-align: right;
      font-size: 28rpx;
      font-family: "UKIJ Ekran" !important;
      color: #666;
      margin-right: 30rpx;
    }
    .content {
      width: 96%;
      margin-top: 15rpx;
      margin-left: auto;
      margin-right: auto;
      height: 355rpx;
      display: grid;
      padding: 5rpx 10rpx;
      grid-template-columns: auto auto auto;
      grid-template-rows: auto auto auto;
      grid-gap: 17rpx;
      /*  display: flex;
    justify-content: space-around;
    align-content: space-around;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-items: center; */

      .item {
        border-radius: 20rpx;
        height: 165rpx;
        box-shadow: 0 0 5rpx 2rpx rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
        }
        .title {
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 40rpx;
          background-color: rgba(0, 0, 0, 0.3);
          font-size: 25rpx;
          color: white;
          text-align: center;
          line-height: 40rpx;
          font-family: "Alp Ekran", Cambria, Cochin, Georgia, Times,
            "Times New Roman", serif, Arial, Helvetica, sans-serif !important;
        }
      }
    }
  }
  .qq-ad {
    height: 220rpx;
    width: 96%;
    margin: 0 auto;
    border-radius: 30rpx;
    box-shadow: 0 0 5rpx 2rpx rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    margin-bottom: 50rpx;
  }
}
</style>
